<template>
    <section class="section featured-tours">
        <div class="container">
            <h2 class="section-title">特色旅游</h2>
            <div class="tabs">
                <button v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }"
                    @click="activeTab = index">
                    {{ tab }}
                </button>
            </div>
            <div class="tours-grid">
                <div class="tour-card" v-for="(tour, index) in filteredTours" :key="index">
                    <div class="tour-image" :style="{ background: tour.bgGradient }"></div>
                    <div class="tour-info">
                        <h3>{{ tour.title }}</h3>
                        <div class="tour-meta">
                            <span class="duration">{{ tour.duration }}</span>
                            <span class="price">{{ tour.price }}</span>
                        </div>
                        <div class="tour-highlights">
                            <span v-for="(highlight, i) in tour.highlights" :key="i">{{ highlight }}</span>
                        </div>
                        <button class="tour-button">立即预订</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
export default {
    name: 'FeaturedTours',
    data() {
        return {
            activeTab: 0,
            tabs: ['全部', '海岛度假', '城市探索', '冒险之旅'],
            tours: [
                {
                    title: "马尔代夫豪华水上别墅",
                    bgGradient: "linear-gradient(135deg, #40E0D0, #6495ED)",
                    duration: "7天6晚",
                    price: "¥12,800起",
                    highlights: ["私人海滩", "浮潜体验", "全包套餐", "蜜月推荐"],
                    type: "海岛度假"
                },
                {
                    title: "东京都市文化探索",
                    bgGradient: "linear-gradient(135deg, #FF7F50, #FF6347)",
                    duration: "5天4晚",
                    price: "¥6,999起",
                    highlights: ["浅草寺", "秋叶原", "迪士尼乐园", "美食之旅"],
                    type: "城市探索"
                },
                {
                    title: "新西兰南岛冒险之旅",
                    bgGradient: "linear-gradient(135deg, #9ACD32, #32CD32)",
                    duration: "10天9晚",
                    price: "¥18,500起",
                    highlights: ["蹦极跳", "冰川徒步", "指环王取景地", "观星体验"],
                    type: "冒险之旅"
                },
                {
                    title: "巴黎浪漫艺术之旅",
                    bgGradient: "linear-gradient(135deg, #9370DB, #BA55D3)",
                    duration: "6天5晚",
                    price: "¥9,999起",
                    highlights: ["卢浮宫", "埃菲尔铁塔", "塞纳河游船", "米其林餐厅"],
                    type: "城市探索"
                },
                {
                    title: "巴厘岛瑜伽静修",
                    bgGradient: "linear-gradient(135deg, #FFA500, #FF8C00)",
                    duration: "8天7晚",
                    price: "¥11,200起",
                    highlights: ["海边瑜伽", "SPA护理", "素食餐饮", "冥想课程"],
                    type: "海岛度假"
                },
                {
                    title: "冰岛极光追逐之旅",
                    bgGradient: "linear-gradient(135deg, #1E90FF, #00BFFF)",
                    duration: "9天8晚",
                    price: "¥21,000起",
                    highlights: ["蓝湖温泉", "冰川徒步", "极光观测", "黄金圈"],
                    type: "冒险之旅"
                }
            ]
        }
    },
    computed: {
        filteredTours() {
            if (this.activeTab === 0) return this.tours;
            const typeMap = {
                1: "海岛度假",
                2: "城市探索",
                3: "冒险之旅"
            };
            return this.tours.filter(tour => tour.type === typeMap[this.activeTab]);
        }
    }
}
</script>

<style scoped>
/* 保持原有的样式不变 */
.featured-tours {
    background-color: var(--white);
}

.tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.tabs button {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-color);
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
}

.tabs button.active {
    background: var(--primary-color);
    color: var(--white);
}

.tabs button:hover:not(.active) {
    color: var(--primary-color);
}

.tours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
}

.tour-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.tour-card:hover {
    transform: translateY(-5px);
}

.tour-image {
    height: 180px;
}

.tour-info {
    padding: 18px;
}

.tour-info h3 {
    margin-bottom: 12px;
    color: var(--dark-color);
}

.tour-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    color: var(--text-color);
    font-size: 0.9rem;
}

.tour-highlights {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.tour-highlights span {
    background: #f0f4ff;
    color: var(--primary-color);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
}

.tour-button {
    width: 100%;
    padding: 10px;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
}

.tour-button:hover {
    background: #3a5bef;
}
</style>